<template>
  <div class="new-page em-history padding-0 table-h-48">
    <!-- search -->

    <a-form-model
      ref="task-research-box"
      layout="inline"
      :model="search"
      class="comm-search"
      :style="`width: calc(100% - ${sideMenuWidth} - 33px)`"
    >
      <!-- 筛选条件与查询 -->

      <a-form-model-item label="">
        <a-select
          v-model="search.airline"
          show-arrow
          mode="multiple"
          :max-tag-count="1"
          style="minwidth: 100%"
          placeholder="航空公司"
          allow-clear
          @change="changeAirline"
        >
          <a-icon
            slot="suffixIcon"
            :component="require('@/assets/icon/arrow-down-bold.svg')"
          />
          <a-select-option
            v-for="selectItem in ftmAirlineList"
            :key="selectItem.id"
            :value="selectItem.name"
          >
            {{ selectItem.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <!-- 事件类型 -->
      <a-form-model-item label="">
        <eventList
          v-model="search.eventType"
          :mmsg-type.sync="search.mmsgType"
          :is-etops.sync="search.isEtops"
          :is-ground.sync="search.isGround"
          :show-cmm="true"
          :mul="true"
          width="100%"
          placeholder="事件类型"
        />
      </a-form-model-item>

      <!-- 机队 -->
      <a-form-model-item label="">
        <a-select
          v-model="search.fleet"
          show-arrow
          :data-source="ftmFleetListFilter"
          style="minwidth: 100%"
          placeholder="机队"
          mode="multiple"
          :max-tag-count="1"
          allow-clear
          @change="changeFleet"
        >
          <a-icon
            slot="suffixIcon"
            :component="require('@/assets/icon/arrow-down-bold.svg')"
          />
          <a-select-option
            v-for="selectItem in ftmFleetList"
            :key="selectItem.id"
            :value="selectItem.name"
          >
            <a-tooltip
              placement="left"
              :destroy-tooltip-on-hide="true"
              :mouse-enter-delay="0.2"
            >
              <template slot="title">
                {{ selectItem.name }} ({{ selectItem.num }})
              </template>
              {{ selectItem.name }} ({{ selectItem.num }})
            </a-tooltip>
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <!-- 机号 -->
      <a-form-model-item label="">
        <tailNumber
          v-model="search.tailnumber"
          :data-source="ftmAirplaneListFilter"
          value-key="tailnumber"
          name-key="tailnumber"
          width="100%"
        />
      </a-form-model-item>

      <!-- ATA -->
      <a-form-model-item label="">
        <ataList v-model="search.ata" width="100%" />
      </a-form-model-item>

      <!-- priority -->
      <a-form-model-item label="">
        <a-select
          v-model="search.priority"
          show-arrow
          style="minwidth: 100%"
          placeholder="优先级"
          mode="multiple"
          :max-tag-count="1"
          allow-clear
        >
          <a-icon
            slot="suffixIcon"
            :component="require('@/assets/icon/arrow-down-bold.svg')"
          />
          <a-select-option
            v-for="selectItem in [
              ...[...priorityList].reverse(),
              {
                value: 0,
                name: '无'
              }
            ]"
            :key="selectItem.id"
            :value="selectItem.value"
          >
            {{ selectItem.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <!-- 起飞机场 -->
      <a-form-model-item label="">
        <airportList2
          v-model="search.dep"
          placeholder="起飞机场"
          :data-source="listAirportData"
          width="100%"
        />
      </a-form-model-item>

      <!-- 到达机场 -->
      <a-form-model-item label="">
        <airportList2
          v-model="search.arr"
          placeholder="到达机场"
          :data-source="listAirportData"
          width="100%"
        />
      </a-form-model-item>
      <!-- <a-form-model-item label="" style="display:inline-block;width:auto;margin-bottom:0">
        <a-radio-group v-model="codeType">
          <a-radio v-for="item in typeList" :key="item.value" :value="item.value" @click="cancelRadioHandler(item.value)">
            {{ item.name }}
          </a-radio>

        </a-radio-group>
      </a-form-model-item> -->

      <div>
        <a-form-model-item label="">
          <a-input
            v-model="msgCode"
            style="minwidth: 100%"
            placeholder="事件代码"
          />
        </a-form-model-item>
        <a-form-model-item label="">
          <a-input
            v-model="msgName"
            style="minwidth: 100%"
            placeholder="事件名称"
          />
        </a-form-model-item>
        <a-form-model-item label="">
          <a-select
            v-model="search.leg"
            show-arrow
            style="minwidth: 100%"
            placeholder="航段"
            allow-clear
          >
            <a-icon
              slot="suffixIcon"
              :component="require('@/assets/icon/arrow-down-bold.svg')"
            />
            <a-select-option
              v-for="selectItem in [0, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10]"
              :key="selectItem"
              :value="selectItem"
            >
              {{ selectItem }}
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item label="">
          <a-select
            v-model="search.controlStateCode"
            show-arrow
            style="minwidth: 100%"
            placeholder="管控状态"
            allow-clear
          >
            <a-select-option
              v-for="(item, index) of selectOptionS"
              :key="index"
              :value="item.value"
            >
              {{ item.key }}
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item label="">
          <a-date-picker
            v-model="search.startTime"
            style="width: 100%; min-width: 100%"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD 00:00:00"
            placeholder="起始时间"
            :disabled-date="disabledStartDate"
            :get-calendar-container="(triggerNode) => triggerNode.parentNode"
          />
        </a-form-model-item>
        <a-form-model-item label="">
          <a-date-picker
            v-model="search.endTime"
            style="width: 100%; min-width: 100%"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD 23:59:59"
            placeholder="结束时间"
            :disabled-date="disabledEndDate"
            :get-calendar-container="(triggerNode) => triggerNode.parentNode"
          />
        </a-form-model-item>
        <a-form-model-item label="">
          <a-checkbox v-model="otherItemF"> other item </a-checkbox>
        </a-form-model-item>
      </div>

      <!-- <a-form-model-item label="FDE Code" class="ant-row-2 ">

        <eventCodeList v-model="search.fdeCode" value-key="value" name-key="value" />
      </a-form-model-item>
      <a-form-model-item label="MMSG Code" class="ant-row-2">

        <mmsgCodeList v-model="search.mmsgCode" value-key="value" name-key="value" />
      </a-form-model-item>
      <a-form-model-item label="ALERT Code" class="ant-row-2">

        <alertCodeList v-model="search.alertCode" value-key="value" name-key="value" />
      </a-form-model-item> -->

      <a-form-model-item class="of-fb-11">
        <a-button type="primary" ghost @click="resetSearchHandler">
          重置
        </a-button>
        <a-button
          type="primary"
          class="ml-16"
          :loading="eventListLoading"
          @click="changeTable({ current: 1 })"
        >
          查询
        </a-button>

        <a-button
          class="ml-16 fs-export-btn"
          type="primary"
          :loading="processingExportExcelLoading"
          :disabled="selectedRowKeys.length === 0 || eventList.length == 0"
          ghost
          @click="exportHandler"
        >导出</a-button>
      </a-form-model-item>
    </a-form-model>

    <!-- <filterSearch
      ref="fs-search"
      :loading="eventListLoading"
      :selected-row-keys="selectedRowKeys"
      :export-handler="exportHandler"
      @searchHandler="changeTable"
    /> -->

    <!-- table -->
    <a-table
      class="table-box"
      size="small"
      :columns="columns"
      :data-source="eventList"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onChangeRow
      }"
      :pagination="{
        showTotal: (total) => `共 ${total} 条数据`,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showSizeChanger: true, //设置每页显示数据条数
        showQuickJumper: true,
        size: 'big',
        current: paginationOptions.pageNum,
        pageSize: paginationOptions.pageSize,
        total: paginationOptions.total
      }"
      :scroll="{ y: sliderHeight }"
      :loading="eventListLoading"
      :custom-row="customRow"
      :row-key="(row, index) => index"
      :row-class-name="rowClassHandler"
      table-layout="fixed"
      @change="changeTable"
    />
  </div>
</template>

<script>
import { getControlState } from '@/services/eventMonitoring.js';
import rowClass from '@/pages/common/rowClass';
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
// import filterSearch from '@/pages/components/filterSearch';
import dotHistory from '@/pages/components/dotHistory';

import { activeList, priorityList } from '@/pages/common/constant.js';
import { downloadUrl } from '@/utils/util';
import eventList from '@/pages/components/eventList';
import airportList2 from '@/pages/components/airportList2';
import ataList from '@/pages/components/ataList';
import tailNumber from '@/pages/components/tailNumber';
// import eventCodeList from '@/pages/components/eventCodeList';
// import mmsgCodeList from '@/pages/components/mmsgCodeList';
// import alertCodeList from '@/pages/components/alertCodeList';
export default {
  name: 'EventMonitoring',
  components: {
    // eventCodeList,
    // mmsgCodeList,
    // alertCodeList,
    eventList,
    airportList2,
    ataList,
    tailNumber
  },
  mixins: [rowClass],

  // i18n: require('./i18n'),
  data() {
    return {
      selectOptionS: [],
      allCheck: false,
      typeList: [
        {
          value: 1,
          name: 'FDE'
        },
        {
          value: 2,
          name: 'MMSG'
        },
        {
          value: 3,
          name: 'Alert'
        },
        {
          value: 4,
          name: 'ALL'
        }
      ],
      sliderHeight: 600,
      msgName: '',
      msgCode: '',
      priorityList,
      selectedRowKeys: [],
      selectedRowIds: [],
      otherItem: false,
      search: {
        otherItem: 0
      },
      eventDetailsVisible: false,
      currentRow: {},
      refresh: -1,
      columns: [
        {
          title: '机号',
          dataIndex: 't2',
          width: 80,
          customRender: (value, record) => {
            return (
              <a
                class='h-48'
                onClick={(e) =>
                  this.repHandler(e, record, 'flightLegHistoryVisible')
                }
              >
                {record.event?.tailnumber || '--'}
              </a>
            );
          }
        },
        {
          title: '机队',
          dataIndex: 'fleet',
          width: 80,
          customRender: (value, record) => {
            return <span class='h-48'>{record.event?.fleet || '--'}</span>;
          }
        },
        {
          title: '航班',
          dataIndex: 't2ss4',
          width: 80,
          customRender: (value, record) => {
            return (
              <a
                class='h-48'
                onClick={(e) =>
                  this.repHandler(e, record, 'flightLegDetailsVisible')
                }
              >
                {record.event?.flightNo ?? '--'}
              </a>
            );
          }
        },
        {
          title: '故障级别',
          dataIndex: 't1',
          width: 80,
          customCell: () => {
            return {
              style: {
                position: 'relative'
              }
            };
          },
          customRender: (value, record) => {
            const msgType = record.event?.name;
            return (
              <div class='h-48'>
                <noticePriorityIcon
                  is-etops={record.event?.isEtops}
                  priority={record.event?.priority}
                  msgType={msgType}
                />
              </div>
            );
          }
        },
        {
          title: '事件类型',
          dataIndex: 'eventType',
          width: 95,
          customRender: (value, record) => {
            return [
              record.eventType === 'Alert' ? (
                <div class='fw-b lh-1 h-48'>{record.eventType}</div>
              ) : (
                ''
              ),
              record.eventType !== 'Alert' ? (
                <span class={[record.eventType === 'Alert' ? '' : 'fw-b h-48']}>
                  {record.event?.name || '--'}
                </span>
              ) : (
                ''
              )
            ];
          }
        },
        {
          title: '编码',
          dataIndex: 'code',
          width: 120,
          customRender: (value, record) => {
            const pa = [
              <div
                class='em-table-p  fs-14 h-48'
                style='line-height:1!important'
              >
                {record.event?.code}
              </div>
            ];
            record.childrenEvents?.forEach((item) => {
              pa.push(
                <div
                  class='em-table-p fs-14  h-48'
                  style='line-height:1!important'
                >
                  {item.code}
                </div>
              );
            });
            return pa;
          }
        },
        {
          title: '名称',
          dataIndex: 'description',
          customRender: (value, record) => {
            const pa = [
              <div class='em-table-p fs-14 text-over h-48'>
                {record.event?.description}
              </div>
            ];
            record.childrenEvents?.forEach((item) => {
              pa.push(
                <div class='em-table-p fs-14 text-over h-48'>
                  {item.description}
                </div>
              );
            });
            return pa;
          }
        },
        {
          title: '历史',
          dataIndex: 'occurLegList',
          width: 240,
          customRender: (value, record) => {
            const { code, tailnumber } = record?.event ?? {};
            const eventType =
              record.eventType === 'Alert'
                ? record.eventType
                : record.event?.name;
            const pa = [
              <div class='h-48-2'>
                <dotHistory
                  code={code}
                  eventType={eventType}
                  tailnumber={tailnumber}
                  data={value}
                  dotType={record.occurLegStatusList}
                  cLeg={record.event?.leg}
                  iWidth={24}
                  leg={this.$legHandler(
                    record.event?.leg,
                    record.event?.totalLeg
                  )}
                />
              </div>
            ];
            record.childrenEvents?.forEach((cItem) => {
              pa.push(
                <div class='h-48-2'>
                  <dotHistory
                    eventType={eventType}
                    code={code}
                    tailnumber={tailnumber}
                    data={cItem.mmsgLegs}
                    dotType={cItem.mmsgLegStatus}
                    cLeg={record.event?.leg}
                    iWidth={24}
                    leg={this.$legHandler(
                      record.event?.leg,
                      record.event?.totalLeg
                    )}
                  />
                </div>
              );
            });
            return pa;
          }
        },
        {
          title: '状态',
          dataIndex: 'activeState',
          width: 140,
          customRender: (value, record) => {
            return <div class='h-48'>{record.event?.activeState || '--'}</div>;
          }
        },
        {
          title: '活动状态',
          dataIndex: 'activity',
          width: 92,
          customRender: (value, record) => {
            const pa = [
              <div class='em-table-p h-48'>
                <a class='fs-14 fw-b'>
                  {record.event?.activity
                    ? activeList.find(
                      (item) => item.value === record.event?.activity
                    )?.name ?? '--'
                    : '--'}
                </a>
              </div>
            ];
            record.childrenEvents?.forEach((item) => {
              pa.push(
                <div class='em-table-p fs-13 h-48'>
                  {item.activity
                    ? activeList.find(
                      (acItem) => acItem.value === item.activity
                    )?.name ?? '--'
                    : '--'}
                </div>
              );
            });
            return pa;
          }
        },
        {
          title: '管控状态',
          dataIndex: 'controlState',
          width: 140,
          customRender: function(text, row, index) {
            const controlState = row.event.controlState;
            let v = controlState;
            if (!v) {
              v = '待处理';
            }
            return <div class='h-48'>{v}</div>;
          }
        },
        {
          title: '时间',
          dataIndex: 'time',
          width: 80,
          customRender: (value, record) => {
            const pa = [
              <div class='h-48'>
                <div class='em-table-p em-time-box'>
                  <div class='fw-b fs-16 numbers text-color-505363'>
                    {this.$moment.utc(record.event?.msgTime).format('MM-DD')}
                  </div>
                  <div class='fs-12 text-color-9ea5b2'>
                    {this.$moment.utc(record.event?.msgTime).format('HH:mm')}
                  </div>
                </div>
              </div>
            ];
            record.childrenEvents?.forEach((item) => {
              pa.push(
                <div class='h-48'>
                  <div class='em-table-p em-time-box'>
                    <div class='fw-b fs-16 numbers text-color-505363'>
                      {this.$moment.utc(item.msgTime).format('MM-DD')}
                    </div>
                    <div class='fs-12  text-color-9ea5b2'>
                      {this.$moment.utc(item.msgTime).format('HH:mm')}
                    </div>
                  </div>
                </div>
              );
            });
            return pa;
          }
        },
        {
          title: '航段',
          dataIndex: 'Leg',
          width: 80,
          customRender: (value, record) => {
            return (
              <div class='h-48'>
                {this.$legHandler(record.event?.leg, record.event?.totalLeg)}
              </div>
            );
          }
        }
      ]
    };
  },
  computed: {
    ...mapState('fraMonitoring', [
      'ftmAirlineList',
      'ftmFleetList',
      'depListFilter',
      'arrListFilter',
      'ftmAirplaneListFilter',
      'ftmFleetListFilter'
    ]),
    ...mapState('setting', ['pageMinHeight']),
    ...mapGetters('setting', ['sideMenuWidth']),
    ...mapState('eventMonitoring', [
      'paginationOptions',
      'eventList',
      'eventListLoading',
      'processingExportExcelLoading',
      'listAirportData',
      'listAirportLoading'
    ]),
    otherItemF: {
      get() {
        return !!this.search.otherItem;
      },
      set(v) {
        this.search.otherItem = +v;
      }
    }
  },
  mounted() {
    this.getListAirportAll();

    if (this.$route.query?.tailnumber) {
      this.$set(this.search, 'tailnumber', [this.$route.query.tailnumber]);
    }
    if (this.$route.query?.oi) {
      this.$set(this.search, 'otherItem', +this.$route.query?.oi);
    }

    if (this.$route.query?.code) {
      this.msgCode = decodeURIComponent(this.$route.query.code);
      // this.$set(this.search, 'code', [this.$route.query.tailnumber]);
    }
    this.$set(
      this.search,
      'endTime',
      this.$moment.utc(new Date()).format('YYYY-MM-DD HH:mm:ss')
    );
    this.$set(
      this.search,
      'startTime',
      this.$moment.utc(new Date()).add(-7, 'day').format('YYYY-MM-DD HH:mm:ss')
    );
    this.changeTable({ current: 1 });

    this.timedRefresh();

    this.getControlState();
  },
  beforeDestroy() {
    clearTimeout(this.refresh);
  },
  methods: {
    getControlState() {
      getControlState().then((res) => {
        if (!res) {
          return false;
        }
        if (res.code === 200) {
          const data = res.data;
          const reslist = [];
          for (var map of data) {
            const resmap = {};
            resmap.key = map.statuName;
            resmap.value = map.statusCode;
            reslist.push(resmap);
          }
          this.selectOptionS = reslist;
        }
      });
    },
    ...mapMutations('eventMonitoring', ['setState']),
    ...mapMutations('fraMonitoring', {
      setFMState: 'setState'
    }),
    ...mapActions('fraMonitoring', [
      'getFtmFleetFilter',
      'getFtmAirportListFilter',
      'getFtmAirplaneListFilter'
    ]),
    ...mapActions('eventMonitoring', [
      'getEventList',
      'processingExportExcel',
      'getListAirportAll'
    ]),
    resetSearchHandler() {
      this.search = {
        otherItem: 0
      };
      if (this.$route.query?.tailnumber) {
        this.$set(this.search, 'tailnumber', [this.$route.query.tailnumber]);
      }
      if (this.$route.query?.oi) {
        this.$set(this.search, 'otherItem', +this.$route.query?.oi);
      }
      this.msgName = '';
      this.msgCode = '';

      if (this.$route.query?.code) {
        this.msgCode = decodeURIComponent(this.$route.query.code);
        // this.$set(this.search, 'code', [this.$route.query.tailnumber]);
      }

      this.$set(
        this.search,
        'endTime',
        this.$moment.utc(new Date()).format('YYYY-MM-DD HH:mm:ss')
      );
      this.$set(
        this.search,
        'startTime',
        this.$moment
          .utc(new Date())
          .add(-7, 'day')
          .format('YYYY-MM-DD HH:mm:ss')
      );
      this.changeTable({ current: 1 });
    },
    exportHandler() {
      var obj = {
        ids: this.allCheck ? [] : this.selectedRowIds
      };
      const ext = {
        description: this.msgName || undefined
      };
      var temp = { ...ext, ...this.search, noLoading: true };
      var params = Object.assign(obj, temp);
      console.log(params);
      this.processingExportExcel(params).then((res) => {
        const FileName = decodeURI(
          res.headers['content-disposition'].split(';')[1].split('=')[1]
        );
        const type = decodeURI(res.headers['content-type']);
        downloadUrl(res.data, FileName, type);
      });
    },

    onChangeRow(selectedRowKeys, selectedAll) {
      // debugger;
      console.log(
        this.eventList.length,
        selectedRowKeys.length,
        '##################'
      );
      if (this.eventList.length === selectedRowKeys.length) {
        this.allCheck = true;
      } else {
        this.allCheck = false;
      }
      const ids = selectedAll.flatMap((item) => item.event.id);
      this.selectedRowIds = ids;
      this.selectedRowKeys = selectedRowKeys;
    },
    // 点击行
    customRow(record, index) {
      return {
        on: {
          click: (event, e) => {
            this.setState({ key: 'dataType', payload: 1 });
            this.clickRowHandler(record, index);
          }
        }
      };
    },

    clickRowHandler(record, index) {
      this.setFMState({ key: 'activeIndex', payload: [index] });
      this.setFMState({ key: 'eventDetailsVisible', payload: true });
      const currentRow = { ...record, ...(record.event ?? {}) };
      localStorage.setItem('eRow', JSON.stringify(currentRow));
    },
    repHandler(e, record, flag) {
      e.stopPropagation();
      const currentRow = {
        ...record,
        ...(record.event ?? {}),
        id: record.legId || record.id || record.event.legId || record.event.id
      };
      localStorage.setItem('row', JSON.stringify(currentRow));
      this.setFMState({ key: flag, payload: true });
    },
    changeAirline() {
      const params = {
        airline: this.search.airline || undefined,
        fleet: this.search.fleet || undefined
      };
      this.getFtmFleetFilter(params);
      // this.getFtmAirportListFilter(params);
      // 机号
      this.getFtmAirplaneListFilter(params);
    },

    changeFleet(v) {
      const params = {
        airline: this.search.airline || undefined,
        fleet: this.search.fleet || undefined
      };
      // this.getFtmFleetFilter({ airline: v[0] });
      // this.getFtmAirportListFilter({ airline: v[0] });
      // 机号
      this.getFtmAirplaneListFilter(params);
    },
    // 定时60s刷新
    timedRefresh() {
      clearTimeout(this.refresh);
      this.refresh = setTimeout(() => {
        const ext = {
          description: this.msgName || undefined
        };

        ext['code'] = this.msgCode;
        this.getData({ ...ext, ...this.search, noLoading: true });
        this.timedRefresh();
      }, 60000);
    },
    disabledStartDate(startValue) {
      const endValue = this.search.endTime;
      if (!startValue || !endValue) {
        return false;
      }
      return (
        this.$moment(startValue).format('YYYY-MM-DD') >
          this.$moment(endValue).format('YYYY-MM-DD') ||
        this.$moment(endValue).add(-180, 'day').format('YYYY-MM-DD') >
          this.$moment(startValue).format('YYYY-MM-DD')
      );
    },

    disabledEndDate(endValue) {
      const startValue = this.search.startTime;
      if (!endValue || !startValue) {
        return false;
      }
      return (
        this.$moment(startValue).format('YYYY-MM-DD') >
          this.$moment(endValue).format('YYYY-MM-DD') ||
        this.$moment(endValue).format('YYYY-MM-DD') >
          this.$moment(new Date()).format('YYYY-MM-DD')
      );
    },
    changeTable({ current, pageSize = 50 }) {
      // debugger;
      if (this.search.startTime && !this.search.endTime) {
        this.$message.warning('请选择结束时间');
        return;
      }
      if (!this.search.startTime && this.search.endTime) {
        this.$message.warning('请选择开始时间');
        return;
      }

      if (pageSize !== this.paginationOptions.pageSize) {
        current = 1;
      }

      this.setState({
        key: 'paginationOptions',
        payload: { ...this.paginationOptions, pageNum: current, pageSize }
      });
      const ext = {
        description: this.msgName || undefined
      };

      if (
        this.search?.eventType === 'MMSG' ||
        this.search?.eventType?.includes('MMSG')
      ) {
        const mmsgType = this.search.mmsgType ?? 0;
        this.$set(this.search, 'mmsgType', mmsgType);
      }

      ext['code'] = this.msgCode;
      this.timedRefresh();
      // debugger;
      this.getData({ ...ext, ...this.search });

      this.$nextTick(() => {
        setTimeout(() => {
          const och =
            document.querySelector('.em-history')?.clientHeight ?? 600;
          const csh =
            (
              document.querySelector('.comm-search') ||
              document.querySelector('.comm-search-f')
            )?.clientHeight ?? 0;
          this.sliderHeight = `${och - csh - 50}px`;
          console.log(och, csh);
        }, 0);
      });
    },

    async getData(p) {
      // debugger;
      const params = {
        ...p
      };

      await this.getEventList(params);
      if (this.$route.query?.code) {
        if (this.eventList[0]) {
          this.clickRowHandler(this.eventList[0], 0);
        }

        // this.$set(this.search, 'code', [this.$route.query.tailnumber]);
      }
    }
  }
};
</script>

<style lang="less">
@import 'index';
</style>
